
<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>健康医疗</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../element-ui/index.css">
    <link rel="stylesheet" href="../css/font-awesome/css/font-awesome.min.css">
    <style>
        .grid-content {
            border-radius: 4px;
            min-height: 40px;
        }

        .echarts-count {
            display: inline-block;
            width: 630px;
            height: 400px;
            margin-top: 15px;
        }
    </style>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>我的主页</h1>
    </div>
    <div class="app-container">
        <div class="box">
            <el-row>
                <el-col :span="12" align="center">
                    <el-date-picker
                            v-model="member_date"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions"
                            @change="findMemberCount">
                    </el-date-picker>
                </el-col>
                <el-col :span="12" align="center">
                    <el-date-picker
                            v-model="setmeal_date"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions"
                            @change="findSetmealCount">
                    </el-date-picker>
                </el-col>
            </el-row>

            <div id="member" class="echarts-count" v-loading="memberData_loading"></div>
            <div id="setmeal" class="echarts-count" v-loading="setmealData_loading"></div>

            <table v-loading="memberReport_loading" class="exceTable" cellspacing="0" cellpadding="0">
                <tr>
                    <td colspan="4" class="headBody">会员数据报告</td>
                </tr>
                <tr>
                    <td width='20%' class="tabletrBg">今日新增会员数</td>
                    <td width='30%'>{{memberReport.today}}</td>
                    <td width='20%' class="tabletrBg">总会员数</td>
                    <td width='30%'>{{memberReport.total}}</td>
                </tr>
                <tr>
                    <td class="tabletrBg">本周新增会员数</td>
                    <td>{{memberReport.thisWeek}}</td>
                    <td class="tabletrBg">本月新增会员数</td>
                    <td>{{memberReport.thisMonth}}</td>
                </tr>
            </table>
            <table v-loading="orderReport_loading" class="exceTable" cellspacing="0" cellpadding="0">
                <tr>
                    <td colspan="4" class="headBody">预约到诊数据报告</td>
                </tr>
                <tr>
                    <td width='20%' class="tabletrBg">今日预约数</td>
                    <td width='30%'>{{orderReport.todayOrder}}</td>
                    <td width='20%' class="tabletrBg">今日到诊数</td>
                    <td width='30%'>{{orderReport.todayVisit}}</td>
                </tr>
                <tr>
                    <td class="tabletrBg">本周预约数</td>
                    <td>{{orderReport.weekOrder}}</td>
                    <td class="tabletrBg">本周到诊数</td>
                    <td>{{orderReport.weekVisit}}</td>
                </tr>
                <tr>
                    <td class="tabletrBg">本月预约数</td>
                    <td>{{orderReport.monthOrder}}</td>
                    <td class="tabletrBg">本月到诊数</td>
                    <td>{{orderReport.monthVisit}}</td>
                </tr>
            </table>
            <table v-loading="setmealReport_loading" class="exceTable" cellspacing="0" cellpadding="0">
                <tr>
                    <td colspan="4" class="headBody">热门套餐数据报告</td>
                </tr>
                <tr class="tabletrBg textCenter">
                    <td width='20%'>套餐名称</td>
                    <td width='30%'>预约数量</td>
                    <td width='20%'>占比</td>
                    <td width='30%'>备注</td>
                </tr>
                <tr v-for="s in setmealReport">
                    <td>{{s.name}}</td>
                    <td>{{s.count}}</td>
                    <td>{{s.percent+"%"}}</td>
                    <td>{{s.remark}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>

<!-- 引入js -->
<script src="../js/echarts.min.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../element-ui/index.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            member_date: [], //会员统计日期
            setmeal_date: [], //套餐统计日期
            memberData: {}, //会员数量统计数据
            memberData_subtext: '', //会员数量统计副标题
            memberData_loading: false, //会员数量统计遮罩
            setmealData: {}, //套餐占比统计数据
            setmealData_subtext: '', //套餐占比统计副标题
            setmealData_loading: false, //套餐占比统计遮罩
            memberReport: {}, //会员数据报告
            memberReport_loading: false, //会员数据报告遮罩
            orderReport: {}, //预约数据报告
            orderReport_loading: false, //预约数据报告遮罩
            setmealReport: [], //套餐数据报告
            setmealReport_loading: false, //套餐数据报告遮罩
            pickerOptions: { //日期快捷选项
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            }
        },
        mounted() {
            //初始化时间
            this.initDate();
            //会员数量统计
            this.findMemberCount();
            //套餐占比统计
            this.findSetmealCount();
            //会员数据报告
            this.findMemberReport();
            //预约到诊数据报告
            this.findOrderReport();
            //热门套餐数据报告
            this.findSetMealReport();
        },
        methods: {
            //返回yyyy-MM-dd格式字符串
            format(date) {
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                return year + "-" + month + "-" + day;
            },
            //初始化时间，默认最近一周
            initDate() {
                var end = this.format(new Date());

                var millis = new Date().getTime() - 1000 * 3600 * 24 * 7;
                var start = this.format(new Date(millis));

                this.member_date = [start, end];
                this.setmeal_date = [start, end];
            },
            //加载会员数量统计数据
            findMemberCount() {
                //打开遮罩
                this.memberData_loading = true;

                var url = "../home/findMemberCount";
                var param = {
                    start: this.member_date[0],
                    end: this.member_date[1]
                };
                axios.get(url, {params: param})
                    .then(res => {
                        if (res.data.flag) {
                            //日期列表
                            this.memberData.stringList = res.data.data.stringList;
                            //会员数量列表
                            this.memberData.countList = res.data.data.countList;

                            //显示图表
                            this.showMemberChart();
                        } else {
                            this.$message.warning(res.data.msg);
                        }

                        //关闭遮罩
                        this.memberData_loading = false;
                    })
                    .catch(error => {
                        this.$message.error("请求出错：" + error);
                        //关闭遮罩
                        this.memberData_loading = false;
                    });
            },
            //加载套餐占比统计数据
            findSetmealCount() {
                //打开遮罩
                this.setmealData_loading = true;

                var url = "../home/findSetMealCount";
                var param = {
                    start: this.setmeal_date[0],
                    end: this.setmeal_date[1]
                };
                axios.get(url, {params: param})
                    .then(res => {
                        if (res.data.flag) {
                            //套餐数据
                            this.setmealData = res.data.data;

                            //显示图表
                            this.showSetMealChart();
                        } else {
                            this.$message.warning(res.data.msg);
                        }

                        //关闭遮罩
                        this.setmealData_loading = false;
                    })
                    .catch(error => {
                        this.$message.error("请求出错：" + error);
                        //关闭遮罩
                        this.setmealData_loading = false;
                    });
            },
            //显示会员统计折线图
            showMemberChart() {
                //副标题
                this.memberData_subtext = this.member_date[0] + " 至 " + this.member_date[1];
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('member'));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '会员数量统计',
                        subtext: this.memberData_subtext,
                        left: 'center'
                    },
                    yAxis: {
                        type: 'value'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {show: true}
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '会员数量：{c}<br/>日期：{b}'
                    },
                    xAxis: {
                        type: 'category',
                        data: this.memberData.stringList
                    },
                    series: [{
                        data: this.memberData.countList,
                        type: 'line'
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            //显示套餐占比统计饼图
            showSetMealChart() {
                //副标题
                this.setmealData_subtext = this.setmeal_date[0] + " 至 " + this.setmeal_date[1];
                var chartDom = document.getElementById('setmeal');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    title: {
                        text: '套餐占比统计',
                        subtext: this.setmealData_subtext,
                        left: 'center'
                    },
                    legend: {
                        top: 'bottom'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {show: true}
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} <br/>预约人数: {c} ({d}%)'
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: [20, 140],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: this.setmealData
                        }
                    ]
                };
                option && myChart.setOption(option);
            },
            //会员数据报告
            findMemberReport() {
                //打开遮罩
                this.memberReport_loading = true;

                axios.get("../home/findMemberReport")
                    .then(res => {
                        if (res.data.flag) {
                            //会员数据报告
                            this.memberReport = res.data.data;
                        } else {
                            this.$message.warning(res.data.msg);
                        }

                        //关闭遮罩
                        this.memberReport_loading = false;
                    })
                    .catch(error => {
                        this.$message.error("请求出错：" + error);
                        //关闭遮罩
                        this.memberReport_loading = false;
                    });
            },
            //预约到诊数据报告
            findOrderReport() {
                //打开遮罩
                this.orderReport_loading = true;

                axios.get("../home/findOrderReport")
                    .then(res => {
                        if (res.data.flag) {
                            //预约到诊数据报告
                            this.orderReport = res.data.data;
                        } else {
                            this.$message.warning(res.data.msg);
                        }

                        //关闭遮罩
                        this.orderReport_loading = false;
                    })
                    .catch(error => {
                        this.$message.error("请求出错：" + error);
                        //关闭遮罩
                        this.orderReport_loading = false;
                    });
            },
            //热门套餐数据报告
            findSetMealReport() {
                //打开遮罩
                this.setmealReport_loading = true;

                axios.get("../home/findSetMealReport")
                    .then(res => {
                        if (res.data.flag) {
                            //热门套餐数据报告
                            this.setmealReport = res.data.data;
                        } else {
                            this.$message.warning(res.data.msg);
                        }

                        //关闭遮罩
                        this.setmealReport_loading = false;
                    })
                    .catch(error => {
                        this.$message.error("请求出错：" + error);
                        //关闭遮罩
                        this.setmealReport_loading = false;
                    });
            }
        }
    })
</script>
</body>
</html>